<template>
  <div class="renderConfig_img">
      <a-form layout="vertical">
          <a-form-item :label="i18n('renderMode','渲染模式')">
              <div class="rx-img-mode">
                  <div class="rx-img-list" :class="[mdl.mode=='img'?'rx-img-list-hover':'']" @click="selectImg('img')">
                      <div class="rx-img-iconicon" v-if="mdl.mode=='img'">
                          <my-icon  type="icondui"></my-icon>
                      </div>
                      <div class="rx-img-center">
                          <div class="rx-img-name">{{i18n('thumbnail','缩略图')}}</div>
                          <div class="rx-img-item">
                              <div class="rx-img-icon" v-for="i in 3"><my-icon style="font-size: 25px;color: rgba(66, 133, 244, 1)" type="iconfile-image"></my-icon></div>
                              <div class="rx-img-icon"><span style="color: rgba(66, 133, 244, 1)">{{i18n('total','共')}}6{{i18n('fix','张')}}</span></div>
                          </div>
                          <div class="rx-img-item" style="border: none">
                              <div class="rx-img-icon" v-for="i in 3"><my-icon style="font-size: 25px;color: rgba(66, 133, 244, 1)" type="iconfile-image"></my-icon></div>
                          </div>
                      </div>
                  </div>
                  <div class="rx-img-list" :class="[mdl.mode=='link'?'rx-img-list-hover':'']" @click="selectImg('link')">
                      <div class="rx-img-iconicon" v-if="mdl.mode=='link'">
                          <my-icon  type="icondui"></my-icon>
                      </div>
                      <div class="rx-img-center">
                          <div class="rx-img-name">{{i18n('linkDiagram','链接图')}}</div>
                          <div style="display: flex;flex-direction: column;flex: 1">
                              <div class="rx-img-a" v-for="i in 4">
                                  <a>{{i18n('viewPicture','点击查看图片')}}</a>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
          </a-form-item>
          <a-row :gutter="24" v-if="mdl.mode=='img'">
              <a-col :span="12">
                  <a-form-item :label="i18n('width','宽度（px）')">
                      <a-input-number :min="0" v-model:value="mdl.imgWidth"></a-input-number>
                  </a-form-item>
              </a-col>
              <a-col :span="12">
                  <a-form-item   :label="i18n('height','高度（px）')">
                      <a-input-number :min="0" v-model:value="mdl.imgHeight"></a-input-number>
                  </a-form-item>
              </a-col>
          </a-row>
      </a-form>
  </div>
</template>

<script>
    export default {
      name: "renderConfig_img",
      props:["layerid","destroy"],
      data(){
        return {
            labelCol: {span: 6},
            wrapperCol: {span: 18},
            labelCol1: {span: 3},
            wrapperCol1: {span: 19},
            mdl: {
                imgWidth:50,
                imgHeight:50,
                mode:'img',
            }
        }
      },
      methods:{
          i18n(name,text,key){
              return this.$ti18(name,text,"formCellRender",key);
          },
        setData(data){
          if(data.mode){
              this.mdl=data;
          }
        },
        validate(callback){
            callback();
        },
        getData(){
          return this.mdl;
        },
          selectImg(type){
              this.mdl['mode'] = type;
              this.$forceUpdate()
          }
      }
    }
</script>

<style scoped>
.renderConfig_img{
    width: calc(100% - 10px);
}
.rx-img-mode{
    display: flex;
    gap: 20px;
}
.rx-img-list{
    flex: 1;
    height: 245px;
    opacity: 1;
    border-radius: 4px;
    border: 1px solid rgba(232, 232, 232, 1);
    padding: 20px;
    cursor: pointer;
    position: relative;
}
.rx-img-list:hover{
    border: 1px solid rgba(66, 133, 244, 1);
}
.rx-img-list-hover{
    border: 1px solid rgba(66, 133, 244, 1);
}
.rx-img-center{
    border-radius: 4px;
    border: 1px solid rgba(232, 243, 255, 1);
    height: 100%;
    display: flex;
    flex-direction: column;
}
.rx-img-name{
    font-size: 14px;
    font-weight: 700;
    padding: 10px;
    border-bottom: 1px solid rgba(232, 243, 255, 1);
}
.rx-img-item{
    display: flex;
    padding: 10px;
    border-bottom: 1px solid rgba(232, 243, 255, 1);
}
.rx-img-icon{
    width: 60px;
    height: 60px;
    opacity: 1;
    border-radius: 4px;
    background: rgba(232, 243, 255, 1);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 10px 10px 10px;
    margin-right: 10px;
    overflow: hidden;
}
.rx-img-a{
    flex: 1;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(232, 232, 232, 1);
    padding-left: 10px;
}
.rx-img-a:last-child{
    border: none;
}
.rx-img-iconicon{
    position: absolute;
    top: 0px;
    right: 0px;
    height:15px;
    width: 15px;
    border:15px solid;
    border-color:#4285f4  #4285f4 transparent  transparent ;
    text-align: center;
}
.rx-img-iconicon i{
    position: absolute;
    top: -12px;
    right: -12px;
    font-size: 12px;
    color: white;
}
</style>